<template>
	<svg class="box" :class="{ mask: config.hasMask }">
		<rect width="100%" height="100%" fill="#fff" stroke="#ff7f7f" stroke-width="4" />
	</svg>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useNodeData } from "../../composables";
import type { BaseChartNodeData } from "../type";

const { config } = useNodeData<BaseChartNodeData["config"]>({
	borderColor: "#fff",
	boderWidth: 0,
	hasMask: false
});

const border = computed(() => `${config.boderWidth}px solid ${config.borderColor}`);
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100%;
	border: v-bind(border);
}
.mask {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999;
	filter: opacity(0.4);
}
</style>
